<template>
    <div class="box">
       <!-- 精选采集 -->
       <goodChoosen></goodChoosen>
       <!-- top榜单 -->
       <Top></Top>
       <!-- 编辑推荐 -->
       <Recommend></Recommend>
    </div>
</template>

<script>
import Recommend from '@/views/menu/works.vue'
import Top from '@/views/menu/top.vue'
import goodChoosen from './goodChoosen.vue'
export default {
    components: {
        Recommend,
        Top,
        goodChoosen
    },
    data() {
        return {
            activeName: 'first',
            urls: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ],
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            firstUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
}
</script>
<style lang="less" scoped>
.box /deep/ .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    padding: 23px 0;
}
.box /deep/ .el-tabs__nav-wrap::after {
    background-color: #ffffff;
}
// .box /deep/ .el-tabs--border-card>.el-tabs__header {
//     background-color: #ffffff;
// }
// .box /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
//     border: none;
// }
.demo-image {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 0 11px;
    .img {
        flex: 0 0 19%;
        margin-bottom: 20px;
    }
    span {
        display: block;
    }
}
.demo-image /deep/ .el-card {
    border: none;
    color: #909399;
}
.demo-image /deep/ .el-card__body {
    padding: 0;
}
.leftTab /deep/ .el-tabs--left .el-tabs__item.is-left {
    font-size: 17px;
}
.firstcter /deep/ .el-avatar>img {
    width: 100%;
}
.row-bg {
    .top-list-left {
        background: url(../assets/images/top-bg.png);
        background-repeat: round;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .top-list-btn {
            padding: 35px 0 20px;
            height: 42px;
            display: flex;
            justify-content: center;
            .top-list-prev,.top-list-next {
                width: 42px;
                height: 42px;
                background: url(../assets/images/top-change-icon.png) no-repeat;
                background-size: 100% auto;
            }
            .top-list-next {
                transform: rotate(180deg);    
            }
        }
        .top-num-list {
            width: 100%;
            list-style: none;
            li {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                margin-bottom: 20px;
                height: 70px;
                // line-height: 70px;
                border-radius: 6px 0 0 6px;
                cursor: pointer;
                &:hover {
                    background: tomato;
                }
            }
        }
    }
    .top-list-right {
        .top-list-wrap {
            display: flex;
            flex-direction: column;    
            .top-list-item {
                width: 100%;
                a {
                    .top-list-itembox {
                        display: flex;
                        background: #ffff;
                        align-items: center;
                        padding: 20px 10px;
                        border-bottom: 1px solid #ebeef5;  
                        .firstcter {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .father-title {
                                display: inline-flex;
                                flex-direction: column;
                                line-height: 39px;
                                justify-content: space-around;
                                color: #606266;
                                .top-title {
                                    display: block;
                                }
                                .bottom-tittle {
                                    font-size: 10px;
                                }
                            }
                        }
                        .thumbs-up {
                            display: flex;
                            justify-content: space-evenly;
                            .center-cut {
                                width: 1px;
                                // margin: 0 27px;
                                background: #C8E3FF;
                            }
                            .bup {
                                span {
                                    font-size: 10px;
                                    color: #adadad;
                                }
                            }
                            h4 {
                                margin: 0;
                                font-size: 20px;
                                color: #1E90FF;
                            }
                        }
                    }
                }
            }
        }
    }
}
Top {
    margin-top: 10px;
}
</style>